<template>
  <div class="follows">
    <van-icon name="arrow-left" class="back" @click="$router.go(-1)" />
    <van-tabs swipeable>
      <van-tab title="关注" class="guanzhu">
        <div
          class="follow"
          v-for="(item, index) in follews.follow"
          :key="index"
        >
          <img :src="item.avatarUrl" />
          <span>{{ item.nickname }}</span>
        </div>
      </van-tab>
      <van-tab title="粉丝" class="fensi">
        <div class="fans" v-if="!length">还没有粉丝</div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getUserFollews, getUserFans } from "@/api/userInfo";
export default {
  data() {
    return {
      uid: localStorage.getItem("uid"),
      fans: {},
      follews: {},
      length: 0,
    };
  },
  methods: {
    async getUserFollews() {
      const data = await getUserFollews({ uid: this.uid });
      this.follews = data;
      console.log("关注", data);
    },
    async getUserFans() {
      const data = await getUserFans({ uid: this.uid });
      console.log("粉丝", data);
      this.fans = data;
      this.length = data.followeds.length;
    },
  },
  created() {
    this.getUserFollews();
    this.getUserFans();
  },
};
</script>

<style lang="less" scoped>
.follows {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url("../../assets/bg.webp") no-repeat;
  background-size: 100%;
  .back {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 24px;
    z-index: 10;
    color: #5d5d5d;
  }
  /deep/ .van-tab__text--ellipsis {
    font-size: 17px;
    color: #5d5d5d;
  }

  .fensi {
    padding: 10px;
    position: relative;
    height: 100vh;

    .fans {
      position: absolute;
      margin: auto;
      text-align: center;
      top: 150px;
      left: 0;
      right: 0;
      color: #594343;
      font-size: 14px;
    }
  }
  .guanzhu {
    padding: 10px;
    height: 100vh;
    .follow {
      margin-top: 10px;
      display: flex;
      align-items: center;
      img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin-right: 10px;
      }
      span {
        flex: 1;
        height: 55px;
        line-height: 55px;
        font-size: 14px;
      }
    }
  }
}
</style>
